import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu } from 'antd';
import React, { useState } from 'react';
import { Outlet, useNavigate } from 'react-router-dom';

const { Header, Content, Footer, Sider } = Layout;

type MenuItem = Required<MenuProps>['items'][number];

function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
  } as MenuItem;
}

const items: MenuItem[] = [
  getItem('Option 1', '/page1', <PieChartOutlined />),
  getItem('Option 2', '/page2', <DesktopOutlined />),
  getItem('User', 'sub1', <UserOutlined />, [
    getItem('Tom', '3'),
    getItem('Bill', '4'),
    getItem('Alex', '5'),
  ]),
  getItem('Team', 'sub2', <TeamOutlined />, [getItem('Team 1', '6'), getItem('Team 2', '8')]),
  getItem('Files', '9', <FileOutlined />),
];

const App: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  const navigateTo = useNavigate()

  const menuClick = (e: { key: string }) => {
    console.log('点击菜单', e.key);
    // 跳转路径
    navigateTo(e.key)
  }

  // 展开收起侧边栏触发。
  const [openKeys, setOpenKeys] = useState([''])
  const handleOpenChange = (keys: string[]) => {
    console.log(keys);  // 记录当前是那一项展开
    setOpenKeys([keys[keys.length - 1]])  // 修改展开项。只有点击的展开
  }


  return (
    <Layout style={{ minHeight: '100vh' }}>
      {/* 左边侧边栏 */}
      <Sider collapsible collapsed={collapsed} onCollapse={value => setCollapsed(value)}>
        <div className="logo" />
        <Menu
          theme="dark"
          defaultSelectedKeys={['/page1']}
          mode="inline"
          items={items}
          onClick={menuClick}
          // 监听侧边栏展开收起。
          onOpenChange={handleOpenChange}
          // 当前菜单展开项的key数组
          openKeys={openKeys}
        />
      </Sider>

      {/* 右边整体 */}
      <Layout className="site-layout">
        <Header className="site-layout-background" style={{ padding: 0, paddingLeft: '16px' }} >
          {/* 面包屑 */}
          <Breadcrumb style={{ lineHeight: '64px' }}>
            <Breadcrumb.Item>User</Breadcrumb.Item>
            <Breadcrumb.Item>Bill</Breadcrumb.Item>
          </Breadcrumb>
        </Header>
        <Content style={{ margin: '16px 16px 0' }} className="site-layout-background">

          {/* 窗口部分 */}
          <Outlet></Outlet>

        </Content>

        <Footer style={{ textAlign: 'center', padding: 0, lineHeight: '48px' }}>Ant Design ©2018 Created by Ant UED</Footer>
      </Layout>
    </Layout>
  );
};

export default App;